<template>
  <a v-if="linkHref" :class="`tw-libbutton x${_uid}`  + (text.disabled ? ' disabled' : '')"
    :href="linkHref"
    :target="linkTargetIsBlank?'_blank':'_self'"
    @click="$emit('click', text.value)">
    <template v-if="showImg">
      <img v-if="text.imgUrl" class="xicon" :src="text.imgUrl" />
      <img v-else-if="icons[0]" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`" />
      <!-- <img v-else class="xicon" src="@assets/Android.png" /> -->
    </template>
    <span v-html="text.content"></span>
  </a>
  <a :class="`tw-libbutton x${_uid}`"
    :target="linkTargetIsBlank?'_blank':'_self'"
    @click="$emit('click', text.value)"
    v-else-if="custom">
    <div class="xouter">
      <div class="xmiddle">
        <div class="xinner">
          <span v-if="text.content" v-html="text.content"></span>
          <span v-else>&nbsp;</span>
        </div>
      </div>
    </div>
  </a>
  <a :class="`tw-libbutton x${_uid}` + (text.disabled ? ' disabled' : '')"
    :href="text.href ? text.href : null"
    :target="linkTargetIsBlank?'_blank':'_self'"
    @click="$emit('click', text.value)"
    v-else-if="useDeg">
    <div class="xouter">
      <div class="xmiddle">
        <div class="xinner">
          <span v-if="text.content" v-html="text.content"></span>
          <span v-else>&nbsp;</span>
        </div>
      </div>
    </div>
  </a>
  <a v-else :class="`tw-libbutton x${_uid} ` + (text.disabled ? ' disabled' : '')"
    :target="linkTargetIsBlank?'_blank':'_self'"
    @click="$emit('click', text.value)">
    <template v-if="showImg">
      <img v-if="text.imgUrl" class="xicon" :src="text.imgUrl" />
      <img v-else-if="icons[0]" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`" />
      <!-- <img v-else class="xicon" src="@assets/Android.png" /> -->
    </template>
    <span v-if="text.content" v-html="text.content"></span>
    <span v-else>&nbsp;</span>
  </a>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'tw-lib-link',

  mixins: [style, border],

  props,

  computed: {
    style () {
      return Object.assign({
        padding: `${this.paddingY} ${this.paddingX}`,
        lineHeight: this.lineHeight,
        fontSize: this.fontSize,
        color: this.color,
        backgroundColor: this.backgroundColor,
        borderRadius: this.borderRadius,
        hoverBg: this.hoverBg,
        hoverColor: this.hoverColor,
        borderWddth: this.borderWddth,
        custom: this.custom,
        bgImg: this.bgImg,
        borderColor: this.borderColor,
        shadow: this.shadow,
        shadowSize: this.shadowSize,
        customBorderRadius: this.customBorderRadius,
        useDeg: this.useDeg,
        marginLeft: this.marginLeft,
        radiusdeg: this.radiusdeg,
        disabledColor: this.disabledColor,
        iconHeight: this.iconHeight,
        iconRight: this.iconRight,
        iconMarginTop: this.iconMarginTop
      }, this.borderStyle)
    }
  },

  methods: {
    setStyle () {
      // ::root 表示组件根元素选择器
      let style = `
        ::root.tw-libbutton  {
          padding: ${this.paddingY} ${this.paddingX};
          line-height: ${this.lineHeight};
          font-size: ${this.fontSize};
          color: ${this.color};
          background-color: ${this.backgroundColor};
          border-radius: ${this.customBorderRadius};
          box-shadow: ${this.shadow ? `${this.shadowSize} ${this.shadow}` : 'none'};
          z-index: ${this.zIndex ? this.zIndex  : ''};
        }

        ::root.tw-libbutton:hover  {
          color: ${this.hoverColor};
          background-color: ${this.hoverBg};
        }

        ::root.tw-libbutton.disabled {
          background-color: ${this.disabledColor};
        }
      `

      if (this.showImg) {
        style += `
          ::root.tw-libbutton .xicon {
            vertical-align: middle;
            height: ${this.iconHeight};
            margin-right: ${this.iconRight};
            margin-top: ${this.iconMarginTop};
          }
        `
      }
      if (this.gradientType === 'radial') {
        style += `
          ::root.tw-libbutton {
            background-image: radial-gradient(${this.gradient});
            // background: linear-gradient(-69deg, #012451, #0261A6, #015CAC);
          }
        `
      } else if (this.gradientType === 'linear') {
        style += `
          ::root.tw-libbutton {
            background-image: linear-gradient(${this.gradient});
          }
        `
      } else if (this.gradientType === 'repeatlinear') {
        style += `
          ::root.tw-libbutton {
            background-image: repeating-linear-gradient(${this.gradient});
          }
        `
      } else if (this.gradientType === 'repeatradial') {
        style += `
          ::root.tw-libbutton {
            background-image: repeating-radial-gradient(${this.gradient});
          }
        `
      }

      if (this.custom) {
        const outerheight = (parseInt(this.lineHeight) + parseInt(this.borderWddth) * 2) + 'px'

        style = `
          ::root.tw-libbutton .xouter {
            padding: ${this.borderWddth};
            width: fit-content;
            white-space: nowrap;
            height: ${outerheight};
            line-height: ${outerheight};
            border-radius: ${this.customBorderRadius};
            font-size: ${this.fontSize};
            color: ${this.color};
            background-image: linear-gradient(to left, ${this.colors[0]}, ${this.colors[1]});
          }

          ::root.tw-libbutton .xmiddle {
            border-radius: ${this.customBorderRadius};
            background-color: ${this.backgroundColor};
          }

          ::root.tw-libbutton .xinner {
            padding: ${this.paddingY} ${this.paddingX};
            height: ${this.lineHeight};
            line-height: ${this.lineHeight};
            font-size: ${this.fontSize};
            color: ${this.color};
            border-radius: ${this.customBorderRadius};
            background-image: linear-gradient(to left, ${this.colors[2]}, ${this.colors[3]});
          }

        `
        // ::root.tw-libbutton:hover .xinner {
        //   color: ${this.hoverColor};
        //   background-image: linear-gradient(to left, ${this.colors[4]}, ${this.colors[5]});
        // }
      }
      if (this.useDeg) {
        style = `
          ::root.tw-libbutton .xouter {
            color: ${this.color};
            position: relative;
            display: inline-block;
            padding: ${this.paddingY} ${this.paddingX};
            line-height: ${this.lineHeight};
            font-size: ${this.fontSize};
            border: 0;
            margin-left: ${this.marginLeft};
            background: transparent;
            text-decoration: none;
          }

          ::root.tw-libbutton .xouter::before {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background-color: ${this.backgroundColor};
            box-shadow: ${this.shadow ? `${this.shadowSize} ${this.shadow}` : 'none'};
            border-radius: ${this.customBorderRadius};
            transform: skew(${this.radiusdeg});
          }

        `
        if (this.gradientType === 'radial') {
          style += `
            ::root.tw-libbutton .xouter::before {
              background-image: radial-gradient(${this.gradient});
              // background: linear-gradient(-69deg, #012451, #0261A6, #015CAC);
            }
          `
        } else if (this.gradientType === 'linear') {
          style += `
            ::root.tw-libbutton .xouter::before {
              background-image: linear-gradient(${this.gradient});
            }
          `
        } else if (this.gradientType === 'repeatlinear') {
          style += `
            ::root.tw-libbutton .xouter::before {
              background-image: repeating-linear-gradient(${this.gradient});
            }
          `
        } else if (this.gradientType === 'repeatradial') {
          style += `
            ::root.tw-libbutton .xouter::before {
              background-image: repeating-radial-gradient(${this.gradient});
            }
          `
        }
      }

      if (this.hasBorder) {
        style += `
          ::root.tw-libbutton  {
            border: ${this.borderSize} ${this.borderType} ${this.borderColor};
          }
        `
      }

      if (this.bgImg[0]) {
        style += `
          ::root.tw-libbutton  {
            background-image: url("${this.$twApp.fileBaseUrl}${this.bgImg[0].localPath}");
          }
        `
      }

      this.addStyle(style)
    }
  },

  watch: {
    colors: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
